<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="JZH">
    <title>百度输入法</title>
<style>
  ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 14px;
  }    
  button{
      cursor: pointer;
  }
  #outer{
      width: 70px;
      margin: 10px auto;
  }
  #inner{
      margin-top: 5px;
      background-color: #fff;
      border: 1px solid #99f;
      display: none;
  }
  #inner li{
      line-height: 24px;
  }
  #close{
      border-top: 1px solid #99f;
  }
  #inner li a{
      color: #00c;
      padding: 0 5px;
      display: block;
      text-decoration: none;
  }
  #inner li a:hover{
      background-color: deepskyblue;
  }
</style>    
</head>
<body>
     <!--div#outer>ul#inner>li*3>a-->
     <div id="outer">
         <button>输入法</button>
         <ul id="inner">
             <li><a href="#">手写</a></li>
             <li><a href="#">拼音</a></li>
             <li id="close"><a href="#">关闭</a></li>
         </ul>
     </div>      
</body>
<html>
<script>
     window.onload = function(){
         var btn = document.getElementsByTagName('button')[0];
         var inner = document.getElementById('inner');
         var close = document.getElementById('close');
         var style = inner.style;

         btn.onclick = function(){
             style.display = style.display == "block" ? "none" : "block";
         };
         close.onclick = function(){
             style.display = "none";
         }
     }      
</script>